<template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统中心</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      </el-breadcrumb>
        <el-row>
          <el-form :model="userForm" label-width="70px">
            <el-col :span="5">
              <el-form-item label="姓名">
                <el-input v-model="userForm.fullName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="入职日期">
                <el-date-picker type="date" placeholder="选择日期" v-model="userForm.startDate" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="——">
                <el-date-picker type="date" placeholder="选择日期" v-model="userForm.endDate" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form>
          <el-button type="info" plain @click="search()">搜索</el-button>
        </el-row>
      <el-button type="primary" @click="centerDialogVisible = true">添加用户</el-button>
      <el-button type="primary"  @click="importExcelVisible = true">导入</el-button>
      <el-button type="primary"  @click="excelout">导出</el-button>

      <el-table
        :data="userlist"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="编号"
          width="80px">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="用户名"
          width="100">
        </el-table-column>
        <el-table-column
          prop="pwd"
          label="密码"
          width="100">
        </el-table-column>
        <el-table-column
          prop="fullName"
          label="姓名"
          width="100">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          width="80">
          <template slot-scope="scope">
            {{scope.row.sex | sexfmt}}
          </template>
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱">
        </el-table-column>
        <el-table-column
          prop="tel"
          label="手机号">
        </el-table-column>
        <el-table-column
          prop="isEnable"
          label="状态"
          width="100">
          <template slot-scope="scope">
            <span style="display:none;">{{scope.row.state=(scope.row.isEnable==0)}}</span>
            <!--<el-switch
              v-model="scope.row.state"
              active-color="#13ce66"
              inactive-color="#ff4949" @change="updateisenable(scope.row.id,scope.row.isEnable)">
            </el-switch>-->
            <el-switch
              v-model="scope.row.state"
              active-color="#13ce66"
              inactive-color="#ff4949" @change="updateisenable(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="hiredate"
          label="入职时间">
          <template slot-scope="scope">
            {{scope.row.hiredate | datefmt('YYYY-MM-DD HH:mm:ss')}}
          </template>
        </el-table-column>
        <el-table-column
          prop="hiredate"
          label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.isEnable==0?isShow:!isShow" type="primary" icon="el-icon-edit" @click="getuser(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.isEnable==0?!isShow:isShow" type="primary" icon="el-icon-edit" @click="userrole(scope.row)">分配角色</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="page.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>


      <el-dialog
        :title="user.id==null?'添加用户':'编辑用户'"
        :visible.sync="centerDialogVisible"
        center :close-on-click-modal="false" @closed="crearUser">
        <el-form ref="form" :model="user" label-width="80px">
          <el-form-item label="上传头像">
            <el-upload
              class="avatar-uploader"
              action="/api/finance-service-system/user/upload"
              :show-file-list="false"
              :headers="auth"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="user.image.length!=0" :src="'/api/finance-service-system/user/download/'+user.image" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="10">
          <el-form-item label="用户名">
            <el-input v-model="user.userName"></el-input>
          </el-form-item>
            </el-col>
            <el-col :span="10">
          <el-form-item label="入职日期">
            <el-date-picker v-model="user.hiredate" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="姓名">
                <el-input v-model="user.fullName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别">
                <el-radio v-model="user.sex" label=0>男</el-radio>
                <el-radio v-model="user.sex" label=1>女</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="22">
            <el-col :span="11">
              <el-form-item label="手机号">
                <el-input v-model="user.tel" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="邮箱">
                <el-input v-model="user.email" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveUser()">确 定</el-button>
  </span>
      </el-dialog>

      <el-dialog
        title="分配角色"
        :visible.sync="userDialogVisible"
        center :close-on-click-modal="false" @closed="crearUser">
        <el-form ref="form" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item label="用户名">
                <el-input v-model="fullName" disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="角色">
                <el-select v-model="roleIds" filterable multiple placeholder="请选择">
                  <el-option
                    v-for="item in rolelist"
                    :key="item.id"
                    :label="item.roleName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="userDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addroleuser()">确 定</el-button>

  </span>
      </el-dialog>
      <el-dialog title="导入用户信息" :visible.sync="importExcelVisible" :close-on-click-modal="false" width="30%">
        <el-upload
          class="upload-demo"
          drag
          action="/api/user/uploadfile"
          :headers="auth"
          :on-success="uploadExcelSuccess"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">上传用户Excel数据</div>
        </el-upload>
      </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "UserList",
      data(){
          return{
            user:{image:''},
            userForm:{},
            userlist:[],
            page:{
              pagenum:0,
              pagesize:5
            },
            status:'1',
            isShow:false,
            total:0,
            fullName:'',
            userid:'',
            rolelist:[],
            roleIds:{},
            centerDialogVisible:false,
            userDialogVisible:false,
            importExcelVisible:false,
            auth:{token:''}
          }
      },
      methods:{
        excelout:function(){
          location.href="/api/finance-service-system/user/outuser";
        },
        uploadExcelSuccess:function(res,file){
          this.importExcelVisible=false;
            this.search();
        },
        handleAvatarSuccess(res, file) {
          this.user.image=res.result.path;
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg'||file.type === 'image/png';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
        updateisenable:function(row){
          this.user=row;
          this.user.isEnable=row.isEnable==0?1:0;
          this.$http.post("/finance-service-system/user/updateisenable",this.user).then(
            (res)=>{
              if(res.data.success){
                this.$message({
                  message:res.data.message,
                  type: 'success'
                });
              }else{
                this.$message.error(res.data.message);
              }
              this.search();
            }
          );
        },
        addroleuser:function(){
            var formdata=new FormData();
            formdata.append("userid",this.userid);
            formdata.append("roleIds",this.roleIds);
            this.$http.post("/finance-service-system/userRole/save",formdata).then(
              (res)=>{
                if(res.data.success){
                  this.$message({
                    message: '数据保存成功',
                    type: 'success'
                  });
                }else{
                  this.$message.error(res.data.message);
                }
                this.userDialogVisible=false;
              }
            );
        },
        userrole: async function (row) {
          this.userDialogVisible = true;
          this.fullName = row.fullName;
          this.userid = row.id;
          let res = await this.$http.get("/role/getrole");
          this.rolelist=res.data.result;
          this.$http.get("/finance-service-system/userRole/getroleid/" + row.id).then(
            (res) => {
              if (res.data.success) {
                this.roleIds = res.data.result;
              } else {
                this.$message.error(res.data.message);
              }
            }
          );
        },
          search:function () {
              this.$http.post("/finance-service-system/user/list/"+this.page.pagenum+"/"+this.page.pagesize,this.userForm).then(
                (res)=>{
                  this.userlist=res.data.result.list;
                  this.total=res.data.result.total;
                }
              )
          },
        handleSizeChange:function (val) {
            this.page.pagesize=val;
            this.search();
        },
        handleCurrentChange:function (val) {
            this.page.pagenum=val;
            this.search();
        },
        saveUser:function(){
            this.$http.post("/finance-service-system/user/saveuser",this.user).then(
              (res)=>{
                if(res.data.success){
                  this.$message({
                    message: '数据保存成功',
                    type: 'success'
                  });
                }else{
                  this.$message.error('用户名已存在或添加失败');
                }
              }
            );
            this.centerDialogVisible=false;
            this.search();
        },
        crearUser:function () {
          this.user={image:''};
        },
        getuser:function (row) {
          this.user=row;
          this.user.sex=row.sex==0?'0':'1';
          this.centerDialogVisible=true;
        }
      },
      filters:{
        sexfmt:function (val) {
          var str="";
          if(val==0){
            str='男';
          }
          if(val==1){
            str='女';
          }
          return str;
        },
        qifit:function (val) {
          var str="";
          if(val==0){
            str='启用';
          }
          if(val==1){
            str='禁用';
          }
          return str;
        }
      },
      mounted() {
          this.search();
          this.auth.token=sessionStorage.getItem("token");
      }
    }
</script>

<style lang="less" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
